<!-- 选择融资订单 -->
<template>
	<view class="choose-finance-order">
		<view class="choose-finance-order-filter">
			<view class="filter-btn" @tap="filterFun">
				<image class="choose-finance-order-filter-img" src="/static/main/shaixuan.png"></image>
				<text>筛选</text>
			</view>
		</view>
		<view class="choose-finance-order-table">
			<view class="choose-finance-order-thead">
				<view class="choose-finance-order-th text-l check-b">
					<checkbox color="#315EFB" class="small-checkbox" value="all"
						:checked="chooseList.length == tableList.length" @tap="changeChooseAllFun" />
				</view>
				<view class="choose-finance-order-th text-l fl1">订单编号</view>
				<view class="choose-finance-order-th text-r w25">金额</view>
				<view class="choose-finance-order-th w35 text-r">过账日期</view>
			</view>
			<view class="choose-finance-order-tr" v-for="tr in tableList" :key="tr.id"
				:class="chooseList.indexOf(tr.id)>-1?'choose-tr':''">
				<view class="choose-finance-order-td text-l check-b">
					<checkbox color="#315EFB" class="small-checkbox" :value="tr.id" @tap="changeChooseFun(tr)"
						:checked="chooseList.indexOf(tr.id)>-1" />
				</view>
				<view class="choose-finance-order-td text-l fl1">{{tr.no}}</view>
				<view class="choose-finance-order-td text-r w25">
					{{tr.money | unitConverter}}
				</view>
				<view class="choose-finance-order-td w35 text-r">
					<view>{{tr.date}}</view>
				</view>
			</view>
		</view>
		<view class="choose-finance-order-btn-box">
			<view class="choose-finance-order-btn" @tap="confirmOrder">
				确认
			</view>
		</view>
		<uni-popup ref="filterDialog" type="dialog">
			<uni-popup-dialog class="customer-dialog no-padding-dialog my-no-title-dialog" type="info"
				:before-close="true" confirmText="确认" cancelText="重置" @confirm="dialogFilterConfirm"
				@close="dialogFilterClose">
				<view class="filter-dialog-box">
					<view class="filter-dialog-title-box">
						<text class="filter-dialog-title">订单筛选</text>
						<uni-icons @tap="closeDialog" class="filter-dialog-close" type="closeempty"
							size="20"></uni-icons>
					</view>
					<view class="filter-form">
						<view class="form-cell">
							<view class="text-l">过账日期</view>
							<view class="cell-box my-date-pick-box">
								<uni-datetime-picker :end="dateEnd" :border="false" type="date"
									@change="changeDateStart">
									<text v-if="dateStart">{{dateStart}}</text>
									<text class="placeholder-color" v-else>起始时间</text>
								</uni-datetime-picker>
								至
								<uni-datetime-picker :start="dateStart" :border="false" type="date"
									@change="changeDateEnd">
									<text v-if="dateEnd">{{dateEnd}}</text>
									<text class="placeholder-color" v-else>终止时间</text>
								</uni-datetime-picker>
							</view>
						</view>
						<view class="form-cell">
							<view class="text-l">订单金额</view>
							<view class="cell-box">
								<input type="text" v-model="amtStart" class="text-l" placeholder="起始金额"
									placeholder-class="placeholder-color" />
								至
								<input type="text" v-model="amtEnd" class="text-r" placeholder="终止金额"
									placeholder-class="placeholder-color" />
							</view>
						</view>
						<view class="cell-box">
							<text class="cell-title">订单编号</text>
							<input class="cell-input" v-model="no" type="text" placeholder="请输入"
								placeholder-class="placeholder-color" />
						</view>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						id: '001',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '002',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '003',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '004',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '005',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '006',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '007',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '008',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '009',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '010',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					},
					{
						id: '011',
						no: '0000001',
						money: 2000,
						date: '2022-01-01'
					}
				],
				dateStart: '',
				dateEnd: '',
				amtStart: '',
				amtEnd: '',
				no: '',
				chooseList: []
			}
		},
		methods: {
			filterFun() {
				this.$refs.filterDialog.open()
			},
			dialogFilterConfirm() {
				this.$refs.filterDialog.close()
			},
			dialogFilterClose() {
				this.dateStart = '';
				this.dateEnd = '';
				this.amtStart = '';
				this.amtEnd = '';
				this.no = '';
			},
			closeDialog() {
				this.$refs.filterDialog.close()
			},
			changeDateStart(e) {
				this.dateStart = e
			},
			changeDateEnd(e) {
				this.dateEnd = e
			},
			changeChooseFun(item) {
				if (this.chooseList.indexOf(item.id) > -1) {
					let findIndex = this.chooseList.findIndex((r) => {
						if (r == item.id) {
							return true
						}
					})
					this.chooseList.splice(findIndex, 1)
				} else {
					this.chooseList.push(item.id)
				}
			},
			changeChooseAllFun() {
				if (this.chooseList.length != this.tableList.length) {
					this.tableList.forEach(item => {
						if (this.chooseList.indexOf(item.id) == -1) {
							this.chooseList.push(item.id)
						}
					})
				} else {
					this.chooseList = []
				}
			},
			confirmOrder() {
				//TODO:选中订单后处理
				uni.showModal({
					title: '提示',
					content: '确认资料填写无误!',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							uni.redirectTo({
								url: '/pages/clt/drawApply'
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style>
	.choose-finance-order {
		width: 100%;
		height: 100%;
		background-color: #F8F9Fc;
		display: flex;
		flex-direction: column;
	}

	.choose-finance-order-filter {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
	}

	.filter-btn {
		height: 88rpx;
		width: 130rpx;
		display: flex;
		align-items: center;
		margin-left: 50rpx;
	}

	.choose-finance-order-filter-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.choose-finance-order-table {
		flex: 1;
		margin: 24rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 16rpx 110rpx;
		box-sizing: border-box;
		overflow: auto;
	}

	.choose-finance-order-thead {
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: solid 1rpx #EFEFEF;
		display: flex;
		flex-direction: row;
		text-align: center;
	}

	.choose-finance-order-tr {
		border-bottom: solid 1rpx #EFEFEF;
		min-height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		text-align: center;
		margin-left: -16rpx;
		margin-right: -16rpx;
		padding: 0 16rpx;

	}

	.choose-finance-order-tr:last-child {
		border: none;
	}

	.choose-tr {
		background: #EDF3FF;
		border-bottom: 1px solid rgba(255, 255, 255, 1);

	}

	.choose-finance-order-th {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
	}

	.choose-finance-order-td {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #333333;
		font-weight: 400;
	}

	.choose-tr .choose-finance-order-td {
		color: #000000;
		font-weight: 600;
	}

	.w25 {
		width: 25%;
	}

	.w35 {
		width: 35%;
	}

	.check-b {
		width: 75rpx;
	}

	.fl1 {
		flex: 1;
	}

	.filter-dialog-box {
		width: 100%;
		text-align: center;
		position: relative;
	}

	.filter-dialog-close {
		position: absolute;
		right: 30rpx;
		top: 8rpx;
	}

	.filter-dialog-title-box {
		width: 100%;
		height: 105rpx;
		line-height: 105rpx;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.filter-dialog-title {
		font-family: PingFangSC-Semibold;
		font-size: 36rpx;
		color: #333333;
		font-weight: 600;
	}

	.filter-form {
		padding: 0 45rpx 48rpx 26rpx;
	}

	.form-cell {
		margin-top: 30rpx;
	}

	.cell-box {
		height: 97rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-bottom: solid 1rpx #EFEFEF;
	}

	.cell-title {
		text-align: left;
		width: 200rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
	}

	.cell-input {
		flex: 1;
		text-align: right;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		margin-left: 16rpx;
	}

	.placeholder-color {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #999999;
		letter-spacing: 0;
		font-weight: 400;
	}

	.choose-finance-order-btn-box {
		height: 192rpx;
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.choose-finance-order-btn {
		color: #FFFFFF;
		font-size: 32rpx;
		width: 670rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #315EFB;
		border-radius: 49rpx;
		text-align: center;
	}
</style>